@require '~styles/variables'
@require '~styles-lib/mixins'

$-size-xs = 60px
$-size = 100px

.-item
	pressy()
	display: inline-block
	margin-right: 10px
	vertical-align: middle
	width: $-size-xs

	@media $media-sm-up
		width: $-size
		margin-right: 20px

.-bubble
	img-circle()
	padding: 2px
	margin-left: -4px
	margin-right: -4px

	.-unread &
		margin-left: 0
		margin-right: 0

.-thumb
	img-circle()
	change-bg('bg-offset')
	border: 2px solid var(--theme-bg-actual)
	width: $-size-xs
	height: $-size-xs

	@media $media-sm-up
		width: $-size
		height: $-size

.-label
	text-overflow()
	theme-prop('color', 'fg')
	font-weight: bold
	font-size: $font-size-tiny
	text-align: center
	margin-top: 10px
	display: none

	@media $media-md-up
		display: block
		font-size: $font-size-small

		.-item:hover &
			theme-prop('color', 'link')
